<template>
	<view class="">
		<!-- 微信员工添加-->
		<uni-popup class="enterStorePopup" ref="enterStorePopup" background-color="#f5f6f6" :mask-click="false">
			<view class="dialog-wechat">
			    <view class="toshop_title">
					预约到店
					<uni-icons class="closed-icon" type="clear" size="30" @click="cancelPopup()"></uni-icons>
				</view>
				<view class="toshop_form">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="valiForm" :modelValue="query" :rules="rules">
						<uni-forms-item label="预约时间">
							<uni-datetime-picker type="date" v-model="query.subscribe_time"/>
						</uni-forms-item>
						<uni-forms-item label="预约门店" required name="store_id">
							<uni-combox emptyTips="没有当前门店" labelKey="title" valueKey="id" label="" :candidates="hotelList"
							    v-model="query.store_id" placeholder="请选择所在门店"></uni-combox>
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="query.remark" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="center_bottom">
				    <text @click="confirm('valiForm')">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import request from '@/utils/request.js';
import dictionary from '@/utils/dictionary.js';
import sun from '@/utils/sun.js';

const query = {
    subscribe_time: "",
    store_id: "",
    remark: "",
};
export default {
    name: "ykrecord",
    components: {
    },
    data() {
        return {
            query: Object.assign({}, query), // 搜索条件
			options:{},
			hotelList:[],
	// 校验规则
				rules: {
					store_id: {
						rules: [{
							required: true,
							errorMessage: '门店不能为空'
						}]
					},
				},
        };
    },

    beforeMount() {
        this.dictionary = dictionary;
    },
    watch: {

    },
	onLoad(options) {
	
	},
	onReachBottom() {
		
	
	},
    methods: {
		// 获取预约门店
		getHotelList() {
		    let that = this;
		    sun.request({
		        url: '/api/dictionary.picker/hotel',
		        token: true,
		        data: {},
		        success(res) {
		            if (res.code == 200) {
		                that.hotelList = res.data.hotelList;
		            }
		        },
		        fail(e) {
		            uni.showToast({
		                icon: 'none',
		                title: '服务器开小差去啦~'
		            });
		        }
		    });
		},
		//关闭微xintianjia
		cancelPopup(){
			this.$refs.enterStorePopup.close()
		},
			showEnterStorePop(options){
				this.options = options;
				this.$refs.enterStorePopup.open('center');
				this.getHotelList();
				this.query=Object.assign({}, query)
				
			},
        //确定进店
        confirm(ref) {
			let that = this;
			this.$refs[ref].validate().then(res => {
					sun.request({
						url: '/h5/customer.enter/doCreate',
						showLoading: true,
						token: true,
						data: {
							id: that.options.id,
							subscribe_time: that.query.subscribe_time,
							store_id: that.query.store_id,
							remark: that.query.remark
						},
						success(res) {
							if (res.code == 200) {
								that.$emit('shopRecord',that.options)
								that.$refs.enterStorePopup.close()
								uni.showToast({
									icon: 'none',
									title: res.msg
								});
							}
						},
						fail(e) { }
					});


							}).catch(err => {
								console.log('err', err);
							})
							return false

        }
    }
};
</script>

<style lang="less" scoped>
	/deep/.uni-popup .uni-popup__wrapper{
		border-radius: 10px !important;
		width: 95%;
		background-color: white !important;

	}
	/deep/.uni-combox{
		font-size: 14px;
		    border: 1px solid #dcdfe6;
		    border-radius: 4px;
		    padding: 8px 10px;
		    position: relative;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
	}
	.dialog-wechat {
	    position: relative;
	    margin: 0 auto;
	    text-align: center;
	    background-color: #ffffff;
	    box-sizing: border-box;
		border-radius: 20px;
		width: 98%;
		.toshop_title {
		    width: 100%;
		    padding: 15px 0;
		    box-sizing: border-box;
		    text-align: center;
		    color: rgba(25, 25, 25, 1);
		    font-size: 16px;
			background-color: #fbfbfb;

			border-top-left-radius:10px;
			border-top-right-radius:10px;
			position:relative;
			.closed-icon{
				position: absolute;
				left: 10px;
				top: 12px;
			}
			
		}
		
		.toshop_form{
			padding:20px;
			padding-bottom:0;
		}
		.center_bottom {
		    width: 100%;
		    height: 99upx;
		    display: flex;
		    justify-content: space-evenly;
		    align-items: center;
			margin-bottom: 20px;
		
		    text:first-child {
		        width: 194rpx;
		        height: 54rpx;
		        border: 1rpx solid rgba(64, 108, 235, 1);
		        border-radius: 27rpx;
		        text-align: center;
		        font-size: 28rpx;
		        font-family: PingFang SC;
		        font-weight: 500;
		        color: rgba(64, 108, 235, 1);
		        line-height: 54upx;
		    }
		
		    text:last-child {
		        width: 194rpx;
		        height: 54rpx;
		        border: 1rpx solid rgba(64, 108, 235, 1);
		        border-radius: 27rpx;
		        text-align: center;
		        font-size: 28rpx;
		        font-family: PingFang SC;
		        font-weight: 500;
		        color: #ffffff;
		        line-height: 54upx;
		        background: rgba(64, 108, 235, 1);
		    }
		}
	}
</style>